<template>
  <div class="w-full h-full absolute">
    <div class="h-full p-5 box-border overflow-y-auto">
      <div class="w-full bg-slate-100 p-5 box-border overflow-hidden rounded mb-5">
        <h1 class="w-full text-center my-5 text-3xl font-semibold">
          <span
            class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"
          >
            一、利用border属性绘制三角形</span
          >
        </h1>
        <p>
          <span
            >要创建指向上方的箭头，则底部边框是彩色的，而左边框和右边框是透明的。无需包含顶部边框。边框宽度决定了箭头的大小：<br
          /></span>
          <span>
            .upwards-arrow {<br />
            width: 0;<br />
            height: 0;<br />
            border-left: 20px solid transparent;<br />
            border-right: 20px solid transparent;<br />
            border-bottom: 20px solid crimson;<br />
            }<br />
          </span>
        </p>
      </div>
      <div class="w-full bg-slate-100 p-5 box-border overflow-hidden rounded mb-5">
        <h1 class="w-full text-center my-5 text-3xl font-semibold">
          <span
            class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"
          >
            二、药丸形状的按钮</span
          >
        </h1>
        <p>
          <span
            >我们可以通过设置按钮的边框半径值来制作药丸形按钮。其中，边框半径应大于按钮的高度：<br
          /></span>
          <span>
            button.btn {<br />
            border-radius: 80px; /* value higher than height of the button */<br />
            padding: 20px 30px;<br />
            background-color: #fdd835;<br />
            border: none;<br />
            color: black;<br />
            font-size: 20px;<br />
            }
          </span>
        </p>
      </div>
      <div class="w-full bg-slate-100 p-5 box-border overflow-hidden rounded mb-5">
        <h1 class="w-full text-center my-5 text-3xl font-semibold">
          <span
            class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"
          >
            三、用省略号（...）截断溢出的文本</span
          >
        </h1>
        <p>
          <span>这个技巧可用于裁剪长文本使得更美观：<br /></span>
          <span>
            intro {<br />
            width: 300px;<br />
            overflow: hidden;<br />
            text-overflow: ellipsis;<br />
            white-space: nowrap;<br />
            }
          </span>
        </p>
      </div>
      <div class="w-full bg-slate-100 p-5 box-border overflow-hidden rounded mb-5">
        <h1 class="w-full text-center my-5 text-3xl font-semibold">
          <span
            class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"
          >
            四、将长文本截断为多行</span
          >
        </h1>
        <p>
          <span
            >这一条与上面的技巧略有不同。虽然文本也被剪裁，但将内容限制在多行：<br
          /></span>
          <span>
            intro {<br />
            width: 300px;<br />
            display: -webkit-box;<br />
            -webkit-box-orient: vertical;<br />
            -webkit-line-clamp: <br />
            overflow: hidden; <br />
            }
          </span>
        </p>
      </div>
      <div class="w-full bg-slate-100 p-5 box-border overflow-hidden rounded mb-5">
        <h1 class="w-full text-center my-5 text-3xl font-semibold">
          <span
            class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"
          >
            五、没必要总写top、right、bottom、left</span
          >
        </h1>
        <p>
          <span
            >使用定位元素时，很多时候我们会这样编写代码top、right、bottom、left分别为0,但这可以使用inset属性简化,如果top、right、bottom、left有不同的值，可以按顺序分别设置：inset:
            -10px 0px -10px 0px。这种简写方式与边距相同：<br
          /></span>
          <span>
            intro {<br />
            position: absolute;<br />
            inset: 0;<br />
            }<br />
            intro {<br />
            position: absolute;<br />
            inset: 1px 2px 3px 4px;<br />
            }
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style scoped></style>
